<template>
  <div>
    <HeaderNav :title="$t('m.headernav.LANGUAGESETTING')" :showBack="true" />
    <div v-for="(item, index) in arr" :key="index" 
        :class="'languagesetting_li_container'+(arrIndex == index ? ' languagesetting_background' : '')" 
        @click="changeLanguage(index)">{{item.name}}</div>
    <!-- <Footer /> -->
  </div>
</template>

<script>
import {
    Cell,
    Tabbar,
    TabbarItem,
    Icon
} from 'vant';
import HeaderNav from '@/components/HeaderNav.vue'
import Footer from '@/components/Footer.vue'
import {postQuery, getQuery} from '@/api/query';
import {changeLanguage, languageList, getLanguage} from '@/api/query';

export default {
  name: 'languageSetting',
  components: {
      [Cell.name]: Cell,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [Icon.name]: Icon,
      HeaderNav,
      Footer
  },
  data(){
    return {
      active: 3,

      arr:[],
      arrIndex: 0
    }
  },
  methods: {
    changeLanguage(index){
      let that = this;
      
      
      //.set('language',language);
      changeLanguage(that.arr[index].code)
      .then (res => {
        if(res.code == 200){
          that.arrIndex = index;
          that.$i18n.locale = that.arr[index].code;
        }else{
          that.$toast.fail(res.msg);
        }
      })
    },
    //加载选择语言
    selectLanguage(){
      let that = this;
      let language = getLanguage();
      for(let i = 0; i < that.arr.length; i ++){
        if(language == that.arr[i].code){
          that.arrIndex = i;
        }
      }
    }
  },
  created(){
    let that = this;
    that.arr = languageList;
    that.selectLanguage();
    // console.log(this.$cookies)
  }
}
</script>
<style scoped>
  .languagesetting_container{
    background-color: #E6FEFE;
    height: 92vh;
    width: 100%;
    padding-top:  8vh;
  }

  .languagesetting_li_container{
    display: flex;
    height: 7vh;
    padding: 0px 40px;
    font-size: 36px;
    align-items: center;
    border-bottom: 2px #a1a1a1 solid;
  }

  .languagesetting_background{
      background-color: #00A0E9;
  }

</style>
